import { useEffect, useState } from "react";
import styles from './index.module.scss';
import clsx from 'clsx'
import history from "@/router/history";
import { UnorderedListOutlined, SearchOutlined, HomeOutlined, HddOutlined } from '@ant-design/icons'

export default (props: any) => {
    const [ showNav, setShowNav ] = useState<boolean>(false)
    useEffect(() => {
        return () => {

        };
    }, []);
    console.log(showNav);
    return (
        <div className={clsx(styles.header, showNav ? styles.showNav : "", props.type =="home" ?  styles.home: "")}>
            <div className={styles.top}>
                <div className={styles.menuIcon} onClick={() => {
                    setShowNav(!showNav);
                }}>
                    <UnorderedListOutlined />
                </div>
                <div className={styles.logo}>
                    {
                        props.children
                    }
                </div>
                <div className={styles.searchIcon}>
                    <SearchOutlined />
                </div>
            </div>
            {
                showNav ? <div className={styles.navlist}>
                    <div className={clsx(styles.icon, styles.home)} onClick={() => {
                        history.push('/home');
                    }}>
                        <HomeOutlined/>
                    </div>
                    <div className={clsx(styles.icon, styles.modelshow)} onClick={() => {
                        history.push('/modelshow');
                    }}>
                    <HddOutlined />
                    </div>
                </div> :null
            }
        </div>
    )
}